<template>
  <div class="login_wrap">
    <transition name="fade-login">
      <div class="login-box" v-if="loginShow">
        <div class="banner_l">
          <el-carousel trigger="click">
            <el-carousel-item>
              <img src="../assets/images/imgList0.253df274.png" alt="" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/images/imgList1.d3bc43c4.png" alt="" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/images/imgList2.6db7e941.png" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="form_r">
          <div class="tips"><span>3秒注册</span> ，海量模板免费使用!</div>
          <div class="form_wrap">
            <ul class="tabs">
              <li
                :class="{ active: status === 'login' }"
                @click="tabClick('login')"
              >
                用户登录
              </li>
              <li
                :class="{ active: status === 'register' }"
                @click="tabClick('register')"
              >
                用户注册
              </li>
            </ul>
            <template v-if="status === 'login'">
              <el-form
                :model="login"
                :rules="ruleslogin"
                ref="login"
                class="input"
              >
                <el-form-item prop="u" :key="1">
                  <img class="img" src="../assets/images/u.png" alt="" />
                  <el-input
                    v-model="login.u"
                    placeholder="请输入手机号码/用户名"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="p" :key="2">
                  <img class="img" src="../assets/images/p.png" alt="" />
                  <el-input
                    type="password"
                    v-model="login.p"
                    placeholder="请输入密码"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="c" :key="3">
                  <img class="img" src="../assets/images/code.png" alt="" />
                  <el-input
                    v-model="login.c"
                    placeholder="请输入图片验证码"
                  ></el-input>
                  <img class="codeImage" :src="codeImage.url" alt="" />
                </el-form-item>
              </el-form>
              <el-button @click="handleLogin('login')" class="l_btn" plain
                >登录</el-button
              >
              <div @click="handleforget" class="forget">忘记密码</div>
            </template>
            <template v-if="status === 'register'">
              <el-form
                :model="register"
                :rules="rulesregister"
                ref="register"
                class="input"
              >
                <el-form-item prop="phone" :key="4">
                  <img class="img" src="../assets/images/u.png" alt="" />
                  <el-input
                    v-model="register.phone"
                    placeholder="请输入手机号码"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password" :key="5">
                  <img class="img" src="../assets/images/p.png" alt="" />
                  <el-input
                    type="password"
                    v-model="register.password"
                    placeholder="请输入用户密码"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="c" :key="6">
                  <img class="img" src="../assets/images/code.png" alt="" />
                  <el-input
                    v-model="register.c"
                    placeholder="请输入图片验证码"
                  ></el-input>
                  <img class="codeImage" :src="codeImage.url" alt="" />
                </el-form-item>
                <el-form-item prop="code">
                  <img class="img" src="../assets/images/code.png" alt="" />
                  <el-input
                    v-model="register.code"
                    placeholder="请输入验证码"
                  ></el-input>
                  <div class="suffix" @click="sendCode">
                    <span>{{
                      codeConfig.disable ? codeConfig.time : "获取验证码"
                    }}</span>
                  </div>
                </el-form-item>
              </el-form>
              <el-button @click="handleRegister('register')" class="l_btn" plain
                >注册</el-button
              >
              <!-- <div>我已阅读并同意</div> -->
            </template>
          </div>
        </div>
      </div>
    </transition>

    <transition name="fade-forget">
      <div class="forget-box" v-if="forgetShow">
        <div class="banner_l">
          <el-carousel trigger="click">
            <el-carousel-item>
              <img src="../assets/images/imgList0.253df274.png" alt="" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/images/imgList1.d3bc43c4.png" alt="" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/images/imgList2.6db7e941.png" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="form_r">
          <div class="tips">重置密码</div>
          <div class="form_wrap">
            <el-form
              :model="forget"
              :rules="rulesforget"
              ref="forget"
              class="input"
            >
              <el-form-item prop="phone" :key="4">
                <img class="img" src="../assets/images/u1.png" alt="" />
                <el-input
                  v-model="forget.phone"
                  placeholder="请输入手机号码"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password" :key="5">
                <img class="img" src="../assets/images/p1.png" alt="" />
                <el-input
                  type="password"
                  v-model="forget.password"
                  placeholder="请输入新密码"
                ></el-input>
              </el-form-item>
              <el-form-item prop="c" :key="6">
                <img class="img" src="../assets/images/code1.png" alt="" />
                <el-input
                  v-model="forget.c"
                  placeholder="请输入图片验证码"
                ></el-input>
                <img class="codeImage" :src="codeImage.url" alt="" />
              </el-form-item>
              <el-form-item prop="code">
                <img class="img" src="../assets/images/code1.png" alt="" />
                <el-input
                  v-model="forget.code"
                  placeholder="请输入验证码"
                ></el-input>
                <div class="suffix" @click="sendCode1">
                  <span>{{
                    codeConfig1.disable ? codeConfig1.time : "获取验证码"
                  }}</span>
                </div>
              </el-form-item>
            </el-form>
            <el-button @click="handleSure('forget')" class="l_btn" plain
              >确定</el-button
            >
            <div class="returnLogin" @click="handleReturn">返回登录</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { LsetItem } from "@/utils/storage";
export default {
  data() {
    return {
      login: {
        u: "", //用户名
        p: "", //密码
        c: "", //图片验证码
        lid: "", //图片id
      },
      register: {
        phone: "", //手机号
        password: "", //密码
        logicId: "", //短信业务编号
        code: "", //短信验证码
        c: "",
      },
      forget: {
        phone: "", //手机号
        password: "", //密码
        logicId: "", //短信业务编号
        code: "", //短信验证码
        c: "",
      },
      ruleslogin: {
        u: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        p: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z]{6,16}$/,
            trigger: "blur",
            message: "密码必须是由6-16位字母+数字组合",
          },
        ],
        c: [
          { required: true, message: "请输入图片验证码", trigger: "blur" },
          { min: 4, max: 4, message: "请输入4位图片验证码", trigger: "blur" },
        ],
      },
      rulesregister: {
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z]{6,16}$/,
            trigger: "blur",
            message: "密码必须是由6-16位字母+数字组合",
          },
        ],
        c: [
          { required: true, message: "请输入图片验证码", trigger: "blur" },
          { min: 4, max: 4, message: "请输入4位图片验证码", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 6, max: 6, message: "请输入6位验证码", trigger: "blur" },
        ],
      },
      rulesforget: {
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z]{6,16}$/,
            trigger: "blur",
            message: "密码必须是由6-16位字母+数字组合",
          },
        ],
        c: [
          { required: true, message: "请输入图片验证码", trigger: "blur" },
          { min: 4, max: 4, message: "请输入4位图片验证码", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 6, max: 6, message: "请输入6位验证码", trigger: "blur" },
        ],
      },
      status: "login",
      codeConfig: {
        time: 180,
        disable: false,
        timer: null,
      },
      codeConfig1: {
        time: 180,
        disable: false,
        timer: null,
      },
      codeImage: {
        url: "",
        logicId: "",
      },
      redirect: null,
      forgetShow: false,
      loginShow: true,
    };
  },
  created() {
    this.getImgCode();
  },
  watch: {
    $route: {
      handler: function (route) {
        console.log(route)
        // 如果你要跳转到user这个页面，但是此时没有token,就跳转到登录页，并且给登录页添加redirect参数，重新登录就会跳转到user，而不是根路径
        /**
         * 只要to也就是要访问的地址不在白名单当中，我们就让他重新跳转到登录页，并且收集此时地址的path
            next({ path: `/login?redirect=${to.path}` })
         */
        this.redirect = route.query && route.query.redirect;
        this.query = route.query && route.query.query;
      },
      immediate: true,
    },
  },
  methods: {
    getImgCode() {
      this.$api("login.imgCode").then((res) => {
        console.log(res);
        this.codeImage.url = res.data;
        this.codeImage.logicId = res.logicId;
      });
    },
    tabClick(tab) {
      this.status = tab;
      this.getImgCode();
      this.login = {
        u: "", //用户名
        p: "", //密码
        c: "", //图片验证码
        lid: "", //图片id
      };
      this.register = {
        phone: "",
        password: "",
        logicId: "",
        code: "",
      };
    },
    sendCode() {
      if (!this.codeConfig.disable) {
        let c = false;
        let phone = false;
        this.$refs.register.validateField("c", (err) => {
          if (!err) {
            c = true;
          }
        });
        this.$refs.register.validateField("phone", (err) => {
          if (!err) {
            phone = true;
          }
        });
        if (c && phone) {
          this.$api("login.sms", {
            code: this.register.c,
            logicId: this.codeImage.logicId,
            phone: this.register.phone,
            template: "USER_REGISTER",
          }).then((res) => {
            if (res) {
              this.register.logicId = res.logicId;
              this.codeConfig.disable = true;
              this.codeConfig.timer = setInterval(() => {
                this.codeConfig.time -= 1;
                if (this.codeConfig.time <= 0) {
                  this.clearCode();
                }
              }, 1000);
            } else {
              this.register.c = "";
              this.getImgCode();
            }
          });
        }
      }
    },
    sendCode1() {
      if (!this.codeConfig1.disable) {
        let c = false;
        let phone = false;
        this.$refs.forget.validateField("c", (err) => {
          if (!err) {
            c = true;
          }
        });
        this.$refs.forget.validateField("phone", (err) => {
          if (!err) {
            phone = true;
          }
        });
        if (c && phone) {
          this.$api("login.sms", {
            code: this.forget.c,
            logicId: this.codeImage.logicId,
            phone: this.forget.phone,
            template: "USER_FORGOT_PASSWORD",
          }).then((res) => {
            if (res) {
              this.forget.logicId = res.logicId;
              this.codeConfig1.disable = true;
              this.codeConfig1.timer = setInterval(() => {
                this.codeConfig1.time -= 1;
                if (this.codeConfig1.time <= 0) {
                  this.clearCode1();
                }
              }, 1000);
            } else {
              this.forget.c = "";
              this.getImgCode();
            }
          });
        }
      }
    },
    clearCode() {
      this.codeConfig.time = 60;
      this.codeConfig.disable = false;
      if (this.codeConfig.timer) {
        clearInterval(this.codeConfig.timer);
        this.codeConfig.timer = null;
      }
    },
    clearCode1() {
      this.codeConfig1.time = 60;
      this.codeConfig1.disable = false;
      if (this.codeConfig1.timer) {
        clearInterval(this.codeConfig1.timer);
        this.codeConfig1.timer = null;
      }
    },
    handleLogin(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.login.lid = this.codeImage.logicId;
          this.$api("login.login", this.login).then((res) => {
            console.log(res);
            if (res) {
              LsetItem("jwtToken", res);
              this.$message({
                message: "登录成功",
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.$router.replace({
                    path: this.redirect || "/",
                    query: this.query?JSON.parse(this.query):{},
                  });
                },
              });
            }
          });
        } else {
          console.log("验证失败");
        }
      });
    },
    handleSure(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log(this.forget);
          this.$api("login.forgot", {
            code: this.forget.code,
            logicId: this.forget.logicId,
            password: this.forget.password,
            phone: this.forget.phone,
          }).then((res) => {
            console.log(res);
            if (!res) {
              this.forget.c = "";
              this.getImgCode();
            } else {
              this.$message({
                message: "重置成功,去登录",
                type: "success",
                duration: 1000,
              });
              this.forgetShow = false;
              this.loginShow = true;
            }
          });
        } else {
          console.log("验证失败");
        }
      });
    },
    handleRegister(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log(this.register);
          this.$api("login.register", {
            code: this.register.code,
            logicId: this.register.logicId,
            password: this.register.password,
            phone: this.register.phone,
          }).then((res) => {
            console.log(res);
            if (!res) {
              this.register.c = "";
              this.getImgCode();
            } else {
              LsetItem("jwtToken", res);
              this.$message({
                message: "注册成功",
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.$router.replace({ path: this.redirect || "/" });
                },
              });
            }
          });
        } else {
          console.log("验证失败");
        }
      });
    },
    handleforget() {
      setTimeout(() => {
        this.forgetShow = true;
      }, 200);
      this.loginShow = false;
    },
    handleReturn() {
      this.forgetShow = false;
      setTimeout(() => {
        this.loginShow = true;
      }, 200);
    },
  },
};
</script>
<style lang="scss" scoped>
.login_wrap {
  width: 100%;
  height: 80%;
  background-image: url("../assets/images/logo_background.ff5c99ef.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .fade-login-enter-active,
  .fade-login-leave-active {
    transition: opacity 0.5s;
  }
  .fade-login-enter,
  .fade-login-leave-to {
    opacity: 0;
  }
  .fade-forget-enter-active,
  .fade-forget-leave-active {
    transition: opacity 0.5s;
  }
  .fade-forget-enter,
  .fade-forget-leave-to {
    opacity: 0;
  }
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 940px;
    height: 574px;
    display: flex;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgb(51 152 255 / 10%);
    border-radius: 6px;
    .banner_l {
      flex: 1;
      height: 100%;
      ::v-deep.el-carousel__container {
        height: 574px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .form_r {
      flex: 1;
      height: 100%;
      .tips {
        font-size: 18px;
        padding-top: 40px;
        text-align: center;
        color: #333;
        span {
          color: #ff7077;
        }
      }
      .form_wrap {
        margin: 40px 45px 0;
        .tabs {
          display: flex;
          margin-bottom: 30px;
          li {
            flex: 1;
            height: 40px;
            text-align: center;
            font-size: 14px;
            color: #303133;
            border-bottom: 2px solid #eee;
            cursor: pointer;
          }
          .active {
            border-bottom-color: #ff7d5f;
            color: #ff7d5f;
          }
        }
        .input {
          ::v-deep.el-form-item__content {
            line-height: 40px;
            font-size: 14px;
            position: relative;
            .img {
              position: absolute;
              left: 6px;
              top: 10px;
              z-index: 999;
              width: 18px;
              height: 20px;
            }
            .el-input {
              border-bottom: 1px solid #dcdfe6;
              font-size: 14px;
              .el-input__inner {
                border: 0;
                padding-left: 30px;
              }
            }
            .suffix {
              position: absolute;
              right: 10px;
              top: 0;
              z-index: 999;
              border: 1px solid #409eff;
              height: 27px;
              padding: 1px 0;
              width: 102px;
              border-radius: 4px;
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
              overflow: hidden;
              span {
                color: #3398ff;
              }
            }
            .codeImage {
              position: absolute;
              right: 10px;
              top: -10px;
              z-index: 999;
              width: 120px;
              height: 45px;
            }
          }
        }
      }
      .l_btn {
        background: linear-gradient(158deg, #ff7077, #ff7d5f);
        box-shadow: 1px 1px 3px 0 rgb(255 112 119 / 28%);
        border: 0;
        margin-top: 20px;
        margin-bottom: 30px;
        width: 100% !important;
        color: #fff;
      }
      .forget {
        color: #999;
        width: 16%;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
  .forget-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 940px;
    height: 574px;
    display: flex;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgb(51 152 255 / 10%);
    border-radius: 6px;
    .banner_l {
      flex: 1;
      height: 100%;
      ::v-deep.el-carousel__container {
        height: 574px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .form_r {
      flex: 1;
      height: 100%;
      .tips {
        font-size: 16px;
        padding-top: 40px;
        text-align: center;
        color: #999;
        span {
          color: #ff7077;
        }
      }
      .form_wrap {
        margin: 40px 45px 0;
        .tabs {
          display: flex;
          margin-bottom: 30px;
          li {
            flex: 1;
            height: 40px;
            text-align: center;
            font-size: 14px;
            color: #303133;
            border-bottom: 2px solid #eee;
            cursor: pointer;
          }
          .active {
            border-bottom-color: #ff7d5f;
            color: #ff7d5f;
          }
        }
        .input {
          ::v-deep.el-form-item__content {
            line-height: 40px;
            font-size: 14px;
            position: relative;
            .img {
              position: absolute;
              left: 6px;
              top: 10px;
              z-index: 999;
              width: 18px;
              height: 20px;
            }
            .el-input {
              border-bottom: 1px solid #dcdfe6;
              font-size: 14px;
              .el-input__inner {
                border: 0;
                padding-left: 30px;
              }
            }
            .suffix {
              position: absolute;
              right: 10px;
              top: 0;
              z-index: 999;
              border: 1px solid #409eff;
              height: 27px;
              padding: 1px 0;
              width: 102px;
              border-radius: 4px;
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
              overflow: hidden;
              span {
                color: #3398ff;
              }
            }
            .codeImage {
              position: absolute;
              right: 10px;
              top: -10px;
              z-index: 999;
              width: 120px;
              height: 45px;
            }
          }
        }
      }
      .l_btn {
        background: #409eff;
        box-shadow: 1px 1px 3px 0 rgb(255 112 119 / 28%);
        border: 0;
        margin-top: 20px;
        margin-bottom: 30px;
        width: 100% !important;
        color: #fff;
      }
      .returnLogin {
        color: #4f93fe;
        width: 16%;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
}
</style>